<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<div id='testElem'></div>
<script>

test(function() {
  assert_equals(testElem.getAttribute('style'), null);
  testElem.style.setProperty('--foo', 'first');
  assert_equals(testElem.style.getPropertyValue('--foo'), 'first');
  assert_equals(getComputedStyle(testElem).getPropertyValue('--foo'), 'first');
  assert_equals(testElem.getAttribute('style'), '--foo:first;');
  testElem.style.setProperty('--foo', 'second');
  assert_equals(testElem.style.getPropertyValue('--foo'), 'second');
  assert_equals(testElem.getAttribute('style'), '--foo:second;');
}, "subsequent writes to inline style overwrite older values.")

test(function() {
  var value = '10 20% 30px bla("x")';
  testElem.style.setProperty('--foo', value);
  assert_equals(testElem.style.getPropertyValue('--foo'), value);
  testElem.offsetTop;
  testElem.style.setProperty('--foo', value);
  assert_equals(testElem.style.getPropertyValue('--foo'), value);
  testElem.offsetTop;
  value = '-5 1.5px [ ]'
  testElem.style.setProperty('--foo', value);
  assert_equals(testElem.style.getPropertyValue('--foo'), value);
}, "various token types can be compared")

</script>
